<template>
  <view class="login-container">
    <view class="login-box">
      <view class="tab-container">
        <view
          class="tab-item"
          :class="{ active: activeTab === 'account' }"
          @click="activeTab = 'account'"
          >账号登录</view
        >
      </view>

      <view class="login-form" v-if="activeTab === 'account'">
        <view class="form-item">
          <view class="input-wrapper">
            <text class="iconfont icon-user"></text>
            <input
              type="text"
              v-model="loginForm.username"
              placeholder="用户名"
              @blur="validateUsername"
            />
          </view>
          <view class="error-tip" v-if="errors.username">{{
            errors.username
          }}</view>
        </view>
        <view class="form-item">
          <view class="input-wrapper">
            <text class="iconfont icon-password"></text>
            <input
              type="password"
              v-model="loginForm.password"
              placeholder="密码"
              @blur="validatePassword"
            />
          </view>
          <view class="error-tip" v-if="errors.password">{{
            errors.password
          }}</view>
        </view>
        <view class="form-item">
          <view class="slider-container">
            <view class="slider-track">
              <view class="slider-tip" v-if="!isVerified">请向右滑动验证</view>
              <view class="slider-tip success" v-else>验证通过</view>
              <view
                class="slider-button"
                :class="{ success: isVerified }"
                :style="{ left: sliderLeft + 'px' }"
                @touchstart="touchStart"
                @touchmove="touchMove"
                @touchend="touchEnd"
              >
                <view class="slider-icon">>></view>
              </view>
              <view
                class="slider-mask"
                :style="{ width: sliderLeft + 'px' }"
              ></view>
            </view>
          </view>
        </view>
        <view v-if="errorMessage" class="error-message">
          {{ errorMessage }}
        </view>
        <button class="login-btn" @click="handleLogin" :disabled="isLoading">
          {{ isLoading ? "登录中..." : "登 录" }}
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import authService from "@/asstes/api/authService";

export default {
  name: "Login",
  data() {
    return {
      activeTab: "account",
      loginForm: {
        username: "测试用户1",
        password: "123456",
      },
      sliderLeft: 0,
      startX: 0,
      isVerified: false,
      sliderWidth: 0,
      errors: {
        username: "",
        password: "",
      },
      isLoading: false,
      errorMessage: "",
    };
  },
  mounted() {
    const query = uni.createSelectorQuery().in(this);
    query
      .select(".slider-track")
      .boundingClientRect((data) => {
        this.sliderWidth = data.width - 40; // 40是滑块按钮的宽度
      })
      .exec();
  },
  methods: {
    touchStart(e) {
      if (this.isVerified) return;
      this.startX = e.touches[0].clientX;
    },
    touchMove(e) {
      if (this.isVerified) return;
      const moveX = e.touches[0].clientX - this.startX;
      this.sliderLeft = Math.max(0, Math.min(moveX, this.sliderWidth));
    },
    touchEnd() {
      if (this.isVerified) return;
      if (this.sliderLeft >= this.sliderWidth - 5) {
        this.sliderLeft = this.sliderWidth;
        this.isVerified = true;
      } else {
        this.sliderLeft = 0;
      }
    },
    validateUsername() {
      if (!this.loginForm.username) {
        this.errors.username = "请输入用户名";
        return false;
      }
      if (this.loginForm.username.length < 3) {
        this.errors.username = "用户名至少3个字符";
        return false;
      }
      this.errors.username = "";
      return true;
    },
    validatePassword() {
      if (!this.loginForm.password) {
        this.errors.password = "请输入密码";
        return false;
      }
      if (this.loginForm.password.length < 6) {
        this.errors.password = "密码至少6个字符";
        return false;
      }
      this.errors.password = "";
      return true;
    },
    validateForm() {
      let isValid = true;

      // 用户名校验
      if (!this.loginForm.username) {
        this.errors.username = "请输入用户名";
        isValid = false;
      } else if (this.loginForm.username.length < 3) {
        this.errors.username = "用户名至少3个字符";
        isValid = false;
      } else {
        this.errors.username = "";
      }

      // 密码校验
      if (!this.loginForm.password) {
        this.errors.password = "请输入密码";
        isValid = false;
      } else if (this.loginForm.password.length < 6) {
        this.errors.password = "密码至少6个字符";
        isValid = false;
      } else {
        this.errors.password = "";
      }

      return isValid;
    },
    clearError() {
      this.errorMessage = "";
    },

    showError(message) {
      this.errorMessage = message;
      // 3秒后自动清除错误信息
      setTimeout(() => {
        this.clearError();
      }, 3000);
    },

    async handleLogin() {
      // 清除之前的错误信息
      this.clearError();

      // 表单验证
      if (!this.validateForm()) {
        return;
      }

      // 滑动验证
      if (!this.isVerified) {
        this.showError("请完成滑动验证");
        return;
      }

      try {
        this.isLoading = true;
        const response = await authService.login(this.loginForm);

        console.log("登录成功:", response);

        // 使用 uni 的导航方法
        uni.showToast({
          title: "登录成功",
          icon: "success",
        });

        setTimeout(() => {
          uni.reLaunch({
            url: "/pages/index/index",
            success: () => {
              console.log("跳转成功");
            },
            fail: (error) => {
              console.error("跳转失败:", error);
            },
          });
        }, 1000);
      } catch (error) {
        this.showError(error.message || "登录失败，请稍后重试");
        console.error("登录失败:", error);
      } finally {
        this.isLoading = false;
      }
    },
  },
};
</script>

<style lang="scss">
.login-container {
  min-height: 100vh;
  overflow: hidden;
  background-color: #fff; /* 设置背景为白色 */
  display: flex;
  justify-content: center;
  align-items: center;

  .login-box {
    width: 90%;
    max-width: 600rpx;
    background: transparent; /* 透明背景 */
    border: 1px solid #000; /* 黑色边框 */
    border-radius: 8rpx;
    padding: 30rpx;

    .tab-container {
      display: flex;
      border-bottom: 1px solid #eee;
      margin-bottom: 40rpx;

      .tab-item {
        flex: 1;
        text-align: center;
        padding: 20rpx 0;
        font-size: 28rpx;
        color: #333;
        position: relative;

        &.active {
          color: #333;
          &::after {
            content: "";
            position: absolute;
            bottom: -2rpx;
            left: 50%;
            transform: translateX(-50%);
            width: 40%;
            height: 4rpx;
            background: #2d8cf0;
          }
        }
      }
    }

    .login-form {
      .form-item {
        margin-bottom: 30rpx;

        .error-tip {
          font-size: 24rpx;
          color: #ff4d4f;
          margin-top: 8rpx;
          padding-left: 20rpx;
        }

        .input-wrapper {
          position: relative;

          .iconfont {
            position: absolute;
            left: 20rpx;
            top: 50%;
            transform: translateY(-50%);
            font-size: 32rpx;
            color: #999;
          }

          input {
            width: 100%;
            height: 80rpx;
            border: 1px solid #ddd;
            border-radius: 4rpx;
            padding: 0 20rpx;
            font-size: 28rpx;
            box-sizing: border-box;
          }
        }
      }

      .login-btn {
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        color: #fff;
        background: #333;
        font-size: 32rpx;
        border: none;
        border-radius: 4rpx;
        &:disabled {
          background: #ccc;
          cursor: not-allowed;
        }
      }

      .forgot-pwd {
        text-align: right;
        font-size: 24rpx;
        color: #666;
        margin-top: 20rpx;
      }
    }
  }
}

.slider-container {
  width: 100%;
  height: 80rpx;

  .slider-track {
    position: relative;
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    border: 1px solid #ddd;
    box-sizing: border-box;
    border-radius: 4rpx;
    overflow: hidden;

    .slider-tip {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      line-height: 80rpx;
      text-align: center;
      font-size: 28rpx;
      color: #999;
      z-index: 1;

      &.success {
        color: #52c41a;
      }
    }

    .slider-button {
      position: absolute;
      left: 0;
      top: 0;
      width: 80rpx;
      height: 100%;
      background: #fff;
      box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
      cursor: pointer;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;

      &.success {
        background: #52c41a;
        .slider-icon {
          color: #fff;
        }
      }

      .slider-icon {
        color: #999;
        font-size: 32rpx;
      }
    }

    .slider-mask {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      background: rgba(45, 140, 240, 0.1);
      z-index: 1;
    }
  }
}

.error-message {
  color: #ff4d4f;
  text-align: center;
  margin: 10px 0;
  font-size: 14px;
  min-height: 20px;
}
</style>
